// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

// css OR less预编译器

// 图片

const FormItem = Form.Item;
const { Option } = Select;

/**
 *  Created by xjc on 2019/8/15
 *  Describe:数据连接
 */

@connect(({ foreign, loading }) => ({
  foreign,
  loading: loading.models.foreignRule,
}))
@Form.create()
class AddModal extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/8/15
   *  Describe:当前状态
   */

  state = {
    confirmLoading: false,
  };

  onChange = e => {};

  okHandle() {
    const that = this;
    that.setState({
      confirmLoading: true,
    });
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 800);
    })
      .then(() => {
        that.setState({
          confirmLoading: false,
        });
        that.props.form.validateFields((err, values) => {
          if (!err) {
            const { dispatch } = that.props;
            dispatch({
              type: 'foreign/AddExchange',
              payload: {
                id: that.props.id,
                currency: values.currency,
                currencyName: values.currencyName,
                strikePriceDown: values.strikePriceDown,
                strikePriceUp: values.strikePriceUp,
                tradingDay: values.tradingDay.format('YYYY-MM-DD'),
                expiryDate: values.expiryDate.format('YYYY-MM-DD'),
                toPut: values.toPut,
                toCall: values.toCall,
                toExpiryDate: values.toExpiryDate,
                premium: values.premium,
                mark: values.mark,
                marketValueUsd: values.marketValueUsd,
                type: parseInt(values.type),
                confirm: parseInt(values.confirm),
                bank: parseInt(values.bank),
                costPrice: values.costPrice,
                calculateRet1: values.calculateRet1,
                calculateRet2: values.calculateRet2,
                exchangeRate: values.exchangeRate,
              },
              callback: res => {
                that.props.closeVisbile();
              },
            });
          }
        });
      })
      .catch(() => console.log('Oops errors!'));
  }

  cancelHandle() {
    this.props.closeVisbile();
  }

  render() {
    const { confirmLoading } = this.state;
    const { visible, form } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Modal
        destroyOnClose
        title="添加"
        visible={visible}
        width="80%"
        centered
        onOk={this.okHandle.bind(this)}
        confirmLoading={confirmLoading}
        onCancel={this.cancelHandle.bind(this)}
      >
        <Form onSubmit={this.handleSearch} style={{ overflowY: 'scroll' }}>
          <Row>
            <Col span={12}>
              <FormItem label="币种" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('currency', { initialValue: '', required: true })(
                  <Input style={{ width: '85%' }} placeholder="币种" />
                )}
              </FormItem>
              <FormItem label="名称" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('currencyName', { initialValue: '', required: true })(
                  <Input style={{ width: '85%' }} placeholder="名称" />
                )}
              </FormItem>
              <FormItem label="兑换率" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('exchangeRate', { initialValue: '', required: true })(
                  <Input style={{ width: '85%' }} placeholder="兑换率" />
                )}
              </FormItem>
              <FormItem label="执行价（下）" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('strikePriceDown', { initialValue: '' })(
                  <Input style={{ width: '85%' }} placeholder="小数点后五位" />
                )}
              </FormItem>
              <FormItem label="执行价（上）" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('strikePriceUp', { initialValue: '' })(
                  <Input style={{ width: '85%' }} placeholder="小数点后五位" />
                )}
              </FormItem>

              <FormItem label="类型" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('type', {
                  initialValue: '',
                  required: true,
                })(
                  <Select style={{ width: '85%' }}>
                    <Option value="1">SP</Option>
                    <Option value="2">SC</Option>
                    <Option value="3">BP</Option>
                    <Option value="4">BC</Option>
                  </Select>
                )}
              </FormItem>
              <FormItem label="交易日" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {form.getFieldDecorator('tradingDay', {
                  rules: [{ type: 'object' }],
                })(
                  <DatePicker
                    style={{ width: '85%' }}
                    // showTime
                    format="YYYY-MM-DD"
                    placeholder="选择交易日"
                  />
                )}
              </FormItem>
              <FormItem label="到期日" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {form.getFieldDecorator('expiryDate', {
                  rules: [{ type: 'object' }],
                })(
                  <DatePicker
                    style={{ width: '85%' }}
                    // showTime
                    format="YYYY-MM-DD"
                    placeholder="选择到期日"
                  />
                )}
              </FormItem>
              <FormItem label="距离PUT" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('toPut', { initialValue: '' })(
                  <Input style={{ width: '85%' }} placeholder="小数点后四位" />
                )}
              </FormItem>
              <FormItem label="距离CALL" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('toCall', { initialValue: '' })(
                  <Input style={{ width: '85%' }} placeholder="小数点后四位" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="距到期日" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('toExpiryDate', { initialValue: '' })(
                  <Input style={{ width: '85%' }} placeholder="距到期日" />
                )}
              </FormItem>
              <FormItem label="权利金" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('premium', { initialValue: '', required: true })(
                  <Input style={{ width: '85%' }} placeholder="权利金" />
                )}
              </FormItem>
              <FormItem label="市值（USD）" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('marketValueUsd', { initialValue: '', required: true })(
                  <Input style={{ width: '85%' }} placeholder="市值（USD）" />
                )}
              </FormItem>
              <FormItem label="银行" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('bank', {
                  initialValue: '',
                  required: true,
                })(
                  <Select style={{ width: '85%' }}>
                    <Option value="1">瑞银</Option>
                    <Option value="3">花旗</Option>
                    <Option value="2">中银</Option>
                  </Select>
                )}
              </FormItem>
              <FormItem label="有无确认" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('confirm', {
                  initialValue: '',
                  required: true,
                })(
                  <Select style={{ width: '85%' }}>
                    <Option value="0">否</Option>
                    <Option value="1">是</Option>
                  </Select>
                )}
              </FormItem>
              <FormItem label="当时现价" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('costPrice', {
                  initialValue: '',
                  required: true,
                })(<Input style={{ width: '85%' }} placeholder="小数点后五位" />)}
              </FormItem>
              <FormItem label="计算结果1" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('calculateRet1', {
                  initialValue: '',
                })(<Input style={{ width: '85%' }} placeholder="小数点后九位" />)}
              </FormItem>
              <FormItem label="计算结果2" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('calculateRet2', {
                  initialValue: '',
                })(<Input style={{ width: '85%' }} placeholder="小数点后九位" />)}
              </FormItem>
              <FormItem label="备注" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                {getFieldDecorator('mark', { initialValue: '' })(
                  <Input style={{ width: '85%' }} placeholder="" />
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }

  componentDidMount() {}

  componentWillUnmount() {}
}

export default AddModal;
